<script setup lang="ts">
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { useRoute } from 'vue-router'
import { useInformations } from './hooks'

const { params } = useRoute()
const { DocumentByVid } = useInformations()
DocumentByVid.run(params.vid as string)
</script>

<template>
  <div class="m">
    <ElSkeleton
      class="brd8 h50vh"
      animated
      :loading="DocumentByVid.loading.value"
    >
      <template #template>
        <div class="brd8 my20 bg-white p20">
          <ElSkeletonItem
            v-for="item in 6"
            :key="item"
            variant="h3"
            class="mb15 h30"
            :class="{ 'w40%': item === 1, 'w60%': item === 6 }"
          />
        </div>
      </template>
      <template #default>
        <div class="brd8 lh1.5 my20 bg-white px20 py30">
          <div
            class="fs16 mb10 fw600"
            v-html="DocumentByVid.data.value?.Title"
          />
          <div v-html="DocumentByVid.data.value?.Content" />
          <div v-if="!DocumentByVid.data.value?.Content" class="fs12">
            <div>请在后台添加相关内容。唯一标识为:{{ params.vid }}</div>
          </div>
        </div>
      </template>
    </ElSkeleton>
  </div>
</template>

<style lang="scss" scoped></style>
